<!-- 添加和编辑院校信息 -->
<template>
  <div class="page-box h100 display-flex czbj au dfrtrwweertr">
    <div class="title-label">
      <span class="">{{ isbj ? '保存' : '添加' }}院校</span>
    </div>


    <div class="mt20 formsdrttw">
      <n-form ref="formRef" :rules="rules" :model="fromData" label-width="110" :inline="false" label-placement="left">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="12" label="院校名称:" path="name">
            <n-input v-model:value='fromData.name' type="text" placeholder="请输入院校名称" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="英文院校名称:" path="enNmae">
            <n-input v-model:value='fromData.enName' type="text" placeholder="请输入英文院校名称" size="medium"
              clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="地区:" path="districtId">
            <n-select v-model:value="fromData.districtId" size="medium" placeholder="请选择院校地区" :options="dqoptions"
              clearable />
          </n-form-item-gi>

          <n-form-item-gi span="12" label="详细地址:" path="districtString">
            <n-input v-model:value='fromData.districtString' type="text" placeholder="请输入院校详细地址" size="medium"
              clearable></n-input>
          </n-form-item-gi>


          <n-form-item-gi span="12" label="院校qs排名:" >
            <n-input-number v-model:value='fromData.Qsranking' type="text" placeholder="请输入院校详细地址" size="medium" clearable
              min="1"></n-input-number>
          </n-form-item-gi>
          <n-form-item-gi span="12" label="咨询电话:" path="enquiryTelephone">
            <n-input v-model:value='fromData.enquiryTelephone' type="text" placeholder="请输入咨询电话" size="medium"
              clearable min="1"></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="院校简介:" path="collegeProfile">
            <n-input v-model:value='fromData.collegeProfile' type="textarea" rows="6" placeholder="请输入英文院校名称"
              size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="8" label="院校banner图:" path="banner" class="mt20">
            <div class="logo-context vertical-center pr" @click="photoShowModalsan = true">
              <img :src="fromData.banner" class="w100 h100 imgjz" v-if="fromData.banner" />
              <span v-else>点击上传院校banner图</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="fromData.banner" @click.stop="fromData.banner = ''">
              </i>

            </div>
          </n-form-item-gi>


          <n-form-item-gi span="8" label="院校LOGO:" path="cover" class="mt20">
            <div class="logo-context vertical-center pr" @click="photoShowModal = true">
              <img :src="fromData.cover" class="w100 h100 imgjz" v-if="fromData.cover" />
              <span v-else>点击上传院校LOGO</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="fromData.cover" @click.stop="fromData.cover = ''"> </i>

            </div>
          </n-form-item-gi>



          <n-form-item-gi span="8" label="学院视频介绍:" path="promotionalIntroduction" class="mt20">
            <div class="logo-context vertical-center pr ab" @click="photoShowModaler = true">
              <img :src="fromData.videfn" class="w100 h100 imgjz" v-if="fromData.videfn" />
              <span v-else>点击上传学院视频介绍</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="fromData.videfn" @click.stop="fromData.videfn = ''"> </i>

            </div>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>


    <div class="jkjnjmxertw  vertical-center">
      <div>
        <n-button size="medium" @click="callBack">返回上一页</n-button>
        <n-button type="primary" size="medium" @click="addyx" class="ml20">{{ isbj ? '保存' : '添加' }}院校</n-button>
      </div>
    </div>


    <n-modal v-model:show="photoShowModalsan" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>院校banner图</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="院校banner图"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
    <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>院校logo</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="九分留学院校logo"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>九分留学视频介绍</div>
      </template>
      <div>
        <photoGallery @getImg="getImgvideo" types="九分留学视频介绍" accept=".mp4,.m4v">
        </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImgvideo"> 确定 </n-button>
        </div>
      </template>
    </n-modal>


  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import { callBack, dxpost, qurl, dxget } from "../../util/index"
import photoGallery from "../../components/util/photoGallery";
const formRef = ref()
const cz = qurl()
const isbj = ref(false)
const photoShowModal = ref()
const photoShowModaler = ref()
const photoShowModalsan = ref()

const dqoptions = ref([])
const roid = localStorage.id

const fromData = ref({
  name: "",
  enName: "",
  districtId: "",
  districtString: "",
  cover: "",
  banner: "",
  Qsranking: "",
  collegeProfile: "",
  promotionalIntroduction: "",
  enquiryTelephone: "",
  videfn:""
})





let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  fromData.value.cover = jjnmnxe;
  photoShowModal.value = false;
};



let jjnmnxeer = "";
const getImger = (data) => {
  jjnmnxeer = data;
};
const setImger = () => {
  fromData.value.banner = jjnmnxeer;
  photoShowModalsan.value = false;
};



let imhkser = null

const getImgvideo = (img) => {
  imhkser = img
  console.log(img)
};

const setImgvideo = () => {
  fromData.value.promotionalIntroduction = imhkser.url
  fromData.value.videfn = imhkser.imgurl
  photoShowModaler.value = false
};

const rules = {
  name: {
    required: true,
    message: '请输入院校名称',
    trigger: 'blur'
  },
  enName: {
    required: true,
    message: '请输入英文院校名称',
    trigger: 'blur'
  },
  collegeProfile: {
    required: true,
    message: '请输入院校简介',
    trigger: 'blur'
  },


  enquiryTelephone: {
    required: true,
    message: '请输入咨询电话',
    trigger: 'blur'
  },
  districtString: {
    required: true,
    message: '请输入详细地址',
    trigger: 'blur'
  },
  Qsranking: {
    required: true,
    message: '请输入qs排名',
    trigger: 'blur'
  },
  banner: {
    required: true,
    message: '请上传banner图',
    trigger: 'blur'
  },

  cover: {
    required: true,
    message: '请上传logo',
    trigger: 'blur'
  }, promotionalIntroduction: {
    required: true,
    message: '请上传视频介绍',
    trigger: 'blur'
  },
}


const getcptype = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd?name=jfApplicationArea", { roid: roid })
  dqoptions.value = data
}
getcptype()


const addyx = async () => {

  formRef.value.validate(async (errors) => {
    if (!errors) {
      const { data }: any = await dxpost('studyAbroad/jfInstitutionIntroduction', fromData.value, isbj.value ? 'put' : 'post')
      window.$message.success("操作成功！")
      callBack()
    } else {
      console.log(errors);
    }
  });
}


const initData = async()=>{
  const { data }: any = await dxget("studyAbroad/jfInstitutionIntroduction", { id: cz.id})
  fromData.value = data
}
if(cz.id){
  isbj.value = true
  initData()
}



</script>
<style scoped>
.formsdrttw {
  width: 1000px
}

.sdfddfsrtxer {
  font-size: 24px;
  position: absolute;
  right: -12px;
  top: -12px;
  cursor: pointer;
  color: red;
  background: #fff;
  border-radius: 50%;
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
</style>